<template>
  <div ref="map"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'
import chinaJSON from './china.json'
import { useCounterStore } from '@/stores/counter'

let map = ref()
const mychart = ref<any>(null)
let counterStore = useCounterStore()
let pro = ref('')
echarts.registerMap('china', chinaJSON as any)

onMounted(() => {
  mychart.value = echarts.init(map.value)
  mychart.value.setOption({
    geo: {
      map: 'china',
      roam: false,
      zoom: 1.5,
      top: 180,
      label: {
        show: true,
        color: 'black',
        fontSize: 12
      },
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'lightblue'
            },
            {
              offset: 1,
              color: 'skyblue'
            }
          ],
          global: false
        },
        opacity: 0.8
      },
      //地图高亮的效果
      emphasis: {
        itemStyle: {
          color: 'pink'
        },
        label: {
          fontSize: 16,
          color: 'black'
        }
      }
    }
  })
  mychart.value.on('click', (params: any) => {
    counterStore.province = params.name
    pro.value = params.name
  })
})
watch(
  () => counterStore.province,
  () => {
    console.log(pro.value)
  }
)

// const updateMapStyle = () => {
//   const option = chart.value.getOption()
//   const provinces = option.series?.[0]?.data || []

//   provinces.forEach((province: any) => {
//     province.selected = province.name
//     province.itemStyle = {
//       areaColor: province.selected ? 'pink' : 'lightblue'
//     }
//     province.label = {
//       fontSize: province.selected ? 16 : 12,
//       color: 'black'
//     }
//   })

//   chart.value.setOption(option)
// }
</script>

<style scoped></style>
